<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly Demo: Cloud Storage</title>
  <script src="/storage.js"></script>
  <script src="../../blockly_compressed.js"></script>
  <script src="../../blocks_compressed.js"></script>
  <script src="../../msg/js/en.js"></script>
  <style>
    body {
      background-color: #fff;
      font-family: sans-serif;
    }
    h1 {
      font-weight: normal;
      font-size: 140%;
    }
    #sorry {
      padding: 1ex;
      background-color: #f9edbe;
      border: solid 1px #f0c36d;
    }
    .privacyLink {
      font-family: Roboto, Arial, Helvetica, sans-serif;
      font-size: small;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
    <a href="../index.html">Demos</a> &gt; Cloud Storage</h1>

  <p>This is a simple demo of cloud storage using App Engine.</p>

  <script>
    if ('BlocklyStorage' in window) {
      BlocklyStorage.HTTPREQUEST_ERROR = 'There was a problem with the request.\n';
      BlocklyStorage.LINK_ALERT = 'Share your blocks with the below public link. We\'ll delete them if not used for a year. They are not associated with your account and handled as per Google\'s Privacy Policy. Please be sure not to include any private information.\n\n%1';
      BlocklyStorage.HASH_ERROR = 'Sorry, "%1" doesn\'t correspond with any saved Blockly file.';
      BlocklyStorage.XML_ERROR = 'Could not load your saved file.\n'+
          'Perhaps it was created with a different version of Blockly?';
    } else {
      document.write('<p id="sorry">Sorry, cloud storage is not available.  This demo must be hosted on App Engine.</p>');
    }
  </script>

  <p>&rarr; More info on <a href="https://developers.google.com/blockly/guides/configure-blockly/web/cloud-storage">Cloud Storage</a>&hellip;</p>

  <p>
    <button onclick="BlocklyStorage.link()">Save Blocks</button>
  </p>

  <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
    <category name="Logic" colour="%{BKY_LOGIC_HUE}">
      <block type="controls_if"></block>
      <block type="logic_compare"></block>
      <block type="logic_operation"></block>
      <block type="logic_negate"></block>
      <block type="logic_boolean"></block>
    </category>
    <category name="Loops" colour="%{BKY_LOOPS_HUE}">
      <block type="controls_repeat_ext">
        <value name="TIMES">
          <block type="math_number">
            <field name="NUM">10</field>
          </block>
        </value>
      </block>
      <block type="controls_whileUntil"></block>
    </category>
    <category name="Math" colour="%{BKY_MATH_HUE}">
      <block type="math_number">
        <field name="NUM">123</field>
      </block>
      <block type="math_arithmetic"></block>
      <block type="math_single"></block>
    </category>
    <category name="Text" colour="%{BKY_TEXTS_HUE}">
      <block type="text"></block>
      <block type="text_length"></block>
      <block type="text_print"></block>
    </category>
  </xml>

  <script>
    var demoWorkspace = Blockly.inject('blocklyDiv',
        {media: '../../media/',
         toolbox: document.getElementById('toolbox')});

    // An href with #key triggers an AJAX call to retrieve saved blocks.
    if ('BlocklyStorage' in window && window.location.hash.length > 1) {
      BlocklyStorage.retrieveXml(window.location.hash.substring(1));
    }
  </script>

</body>
<footer>
  <a class="privacyLink" href="https://policies.google.com/privacy">Privacy</a>
</footer>
</html>
